<template>
	<view class="content">
		<view class="customerList">
			<view class="messageList" v-if='order.payType==0'>
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">订单类型</label>
				<input type="text" value="直接消费" placeholder="请输入详细信息" />
			</view>
			<view class="messageList" v-if='order.payType==1'>
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">订单类型</label>
				<input type="text" value="续费" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">订单单号</label>
				<input type="text" v-model="order.orderSn" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">套餐名称</label>
				<input type="text" v-model="order.meal.mealName" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">包厢名称</label>
				<input type="text" v-model="order.device.machineName" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">设备编号</label>
				<input type="text" v-model="order.device.deviceCode" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList" v-if='order.integral==0'>
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">交易金额</label>
				<text>{{order.price}}元(现金消费)</text>
			</view>
			<view class="messageList" v-if='order.integral!=0'>
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">交易金额</label>
				<text>{{order.integral}}分(积分消费)</text>
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">会员名称</label>
				<input type="text" v-model="order.member.nickname" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">会员电话</label>
				<input type="text" v-model="order.member.phone" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">订单时长</label>
				<text>{{order.meal.duration}}小时</text>
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">开始时间</label>
				<input type="text" v-model="order.startTime" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">结束时间</label>
				<input type="text" v-model="order.endTime" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">结束时间</label>
				<input type="text" v-model="order.endTime" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList" v-if="order.orderStatus==14">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">订单状态</label>
				<text>已退款</text>
			</view>
			<view class="messageList" v-if="order.orderStatus==2">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">订单状态</label>
				<text>正常/已拒绝退款</text>
			</view>
			<view class="messageList" v-if="order.orderStatus==7">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">订单状态</label>
				<text>已完成</text>
			</view>
			<view class="messageList" v-if="order.orderStatus==20">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #00aaff;font-weight: 600;">订单状态</label>
				<text>待取消</text>
			</view>
		</view>
		<view v-if="order.orderStatus==20">
			<button type="default"
				style="width: 600rpx;margin-top: 40rpx;border-radius: 30rpx;border-style: solid;border-width: 1rpx;border-color: #00aaff;height: 90rpx;line-height: 90rpx;color: #00aaff;font-weight: 600;text-align: center;"
				@click="agreeCannelOrder()"><text>同意取消</text></button>
			<button type="default"
				style="width: 600rpx;margin-top: 40rpx;border-radius: 30rpx;border-style: solid;border-width: 1rpx;border-color: #00aaff;height: 90rpx;line-height: 90rpx;color: #ffffff;font-weight: 600;text-align: center;background-color: #f46c6c;"
				@click="refuseCannelOrder()"><text>拒绝取消</text></button>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				order: {
					payType: 0,
					integral: 1000,
				},
				store:null
			};
		},
		onLoad(options) {
			let that = this;
			that.orderId = options.orderId;
			that.getDmsOrderDetail(options.orderId);
		},
		methods: {
			async getStoreById(){
				let data = await Api.apiCall('get', Api.qsg.getStore, {
					storeId: this.order.storeId
				});
				if(data){
					this.store = data;
				}
			},
			async getDmsOrderDetail(orderId) {
				let data = await Api.apiCall('post', Api.order.getOrderDetail, {
					id: orderId
				});
				if (data) {
					this.order = data;
					this.getStoreById();
				}
			},
			async agreeCannelOrder(){
				let params = {
					id: this.orderId,
					storeId:Api.STORE_ID
				}
				if(this.store.isDandian=='是'){
					params.storeId = this.order.storeId
				}
				let data = await Api.apiCall('post', Api.order.agreeCannelOrder, params);
				if(data){
					this.getDmsOrderDetail(this.orderId);
					uni.showToast({
						title:'取消成功'
					})
				}
			},
			async refuseCannelOrder(){
				let data = await Api.apiCall('post', Api.order.refuseCannelOrder, {
					id: this.orderId
				});
				if(data){
					this.getDmsOrderDetail(this.orderId);
					uni.showToast({
						title:'已拒绝'
					})
				}
			}
		}
	}
</script>

<style>
	.customerType {
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		vertical-align: top;
		text-align: right;
		padding-right: 30rpx;
		font-size: 30rpx;
	}

	.pickerType {
		width: 540rpx;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}

	.pickerType view {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.upBox {
		padding: 0 30rpx;
	}

	.upBox text {
		display: inline-block;
		padding: 20rpx 0;
	}

	.messageList {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F8F8F8;
	}

	.messageList label {
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		vertical-align: top;
		text-align: right;
		padding-right: 30rpx;
		font-size: 30rpx;
	}

	.messageList input {
		height: 80rpx;
		vertical-align: top;
		display: inline-block;
		line-height: 80rpx;
		font-size: 24rpx;
	}

	.messageList text {
		height: 80rpx;
		vertical-align: top;
		display: inline-block;
		line-height: 80rpx;
		font-size: 24rpx;
	}

	.fan {
		position: relative;
		padding: 30rpx 0;
	}

	.fan button {
		position: absolute;
		top: 30rpx;
		left: 0;
		width: 750rpx;
		height: 480rpx;
		background: none;
		border: none;
	}

	.fanMian {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.fanMian image {
		width: 690rpx;
		height: 480rpx;
	}

	.examTit {
		width: 750rpx;
		height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.examTit text {
		font-size: 24rpx;
		color: #ff1d31;
	}

	.examTit {
		width: 750rpx;
		height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.examTit text {
		font-size: 24rpx;
		color: #ff1d31;
	}

	.fan {
		position: relative;
		padding: 30rpx 0;
	}

	.fan button {
		position: absolute;
		top: 30rpx;
		left: 0;
		width: 750rpx;
		height: 480rpx;
		background: none;
		border: none;
	}

	.fanMian {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.fanMian image {
		width: 690rpx;
		height: 480rpx;
	}
</style>
